<template>
  <div class="search-div">

    <!-- 添加按钮 -->
    <div class="tools-div">
      <el-button type="success" size="small" @click="addShow">添 加</el-button>
    </div>

    <!--- 角色表格数据 -->
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="文章ID" width="180" />
      <el-table-column prop="title" label="文章标题" width="180" />
      <el-table-column prop="createTime" label="发布时间" />
      <el-table-column label="操作" align="center" width="280" #default="scope">
        <el-button type="primary" size="small" @click="show(scope.row)">
          查看
        </el-button>
        <el-button type="success" size="small" @click="update(scope.row)">
          修改
        </el-button>
        <el-popconfirm title="你确定要删除这个吗?"
                       confirm-button-text="确定"
                       cancel-button-text="取消"
                       @confirm="deleteArticle(scope.row)">
          <template #reference>
            <el-button type="danger" size="small">
              <!--                    <el-button type="danger" size="small" @click="deleteById(scope.row)">-->
              删除
            </el-button>
          </template>
        </el-popconfirm>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="添加或修改文章" width="60%" :before-close="handleClose">
      <el-form label-width="100px">
        <el-form-item label="文章标题">
          <el-input v-model="article.title"/>
        </el-form-item>

        <el-form-item label="所属分类">
          <el-select
              class="m-2"
              v-model="article.cid"
              placeholder="选择分类"
              size="small"
              style="width: 100%"
          >
            <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.cname"
                :value="item.cid"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="文章内容">
          <rich-text-editor v-model="article.content" v-if="dialogVisible"></rich-text-editor>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog v-model="dialogShowVisible" title="文章详情" width="60%">
      <h1>{{article.title}}</h1>
      <div v-html="article.content"></div>
    </el-dialog>

  </div>

</template>

<script setup>
import { ref , onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import RichTextEditor from '../../components/RichTextEditor.vue'
import {getArticleList,saveArticle,deleteArticleById,updateArticle} from '../../api/article'
import {getCategoryList} from "../../api/category.js";
import cookie from 'js-cookie'
const categoryList = ref([])
// 定义表格数据模型
let list = ref([])

// 控制对话是否展示的变量
const dialogVisible = ref(false)
const dialogShowVisible = ref(false)
const defaultForm = {
  id: "",
  cid:"",
  title: "",
  content:""
}
const article = ref(defaultForm)   // 使用ref包裹该对象，使用reactive不方便进行重置

//3.1 文章列表展现
const findArticle = async ()=>{
  let cid = 0
  let result = await getArticleList(cid)
  list.value = result.data
}
//3.2.1 文章新增_所属分类显示======================================
const addShow = async ()=>{
  article.value.content = ""; // 在打开小窗口前清空富文本内容
  dialogVisible.value = true
  let result=await getCategoryList();
  categoryList.value = result.data;
}
//===================================
const submit = async ()=>{
  if (article.value.id){
    //有值 修改
    console.log("修改")
    await updateArticle(article.value)

  }else {
    console.log("新增")
    //没有值
    //1.准备数据  保存作者uid
    let uid = cookie.get("uid")
    article.value.uid = uid
    //3.保存文章信息
    await saveArticle(article.value)
  }
  article.value={id: "", cid:"", title: "", content:""}
  dialogVisible.value = false
  findArticle()
}
//3.3 文章查看按钮
const show = (item)=>{
  article.value = item
  dialogShowVisible.value = true
}
//3.4 文章删除
const deleteArticle = async (item)=>{
  await deleteArticleById(item.id)
  await findArticle()
}
//3.5 文章修改==========================================
const update = async (item)=>{
  dialogVisible.value = true
  article.value = item
  let result=await getCategoryList();

  categoryList.value = result.data;
}
// X按钮
const handleClose = () => {
  article.value={id: "", cid:"", title: "", content:""}
  dialogVisible.value = false
}
onMounted(()=>{
  findArticle()
})
</script>

<style scoped>

.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}

.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}

</style>